var size = 16;
var username = []; // 玩家姓名
var index = 0; // 顺序
var users = ["black", "white"]; 
var path = []; // 落子路径(位置)
// 会员
var vips = ['admin']; // 可以吃对方的棋子

$(function () {
	init();

	go();

	back();
})

// 初始化
function init() {
	for (var i = 0; i < size; i++) {
		var $tr = $("<tr>");
		for (var j = 0; j < size; j++) {
			var $td = $("<td>");
			$td.attr("x", i);
			$td.attr("y", j);
			$tr.append($td);
		}
		$("#container").append($tr);
	}

	username.push(prompt("请输入第1个玩家的姓名：", "玩家1"));
	username.push(prompt("请输入第2个玩家的姓名：", "玩家2"));
}

// 下棋
function go() {
	$("td").click(function () {
		// 判断当前位置是否有棋子（同时判断是否为vip，vip可以吃棋子）
		// var i = vips.findIndex((value) => { 
		// 	return value == username[index % 2] 
		// })
		// if ($(this).find("div").length && i == -1) {
		// 	alert("此位置已经有棋子");
		// 	return;
		// }

		// 判断当前位置是否有棋子
		if ($(this).find("div").length) {
			alert("此位置已经有棋子");
			return;
		}

		// 在单元格中放下棋子
		var div = $("<div>");
		div.addClass("item");
		div.addClass(users[index++ % 2]);
		$(this).html(div);
		// 记录落子路径(位置)
		var x = $(this).attr("x") - 0;
		var y = $(this).attr("y") - 0;
		path.push({ x, y }); 
		// 在右侧显示落子路径
		var li = $("<li>");
		li.html(username[(index - 1) % 2] + `落子在：(${x},${y})位置`);
		$("#path").append(li);

		// 判断游戏是否结束
		var clsName = div.attr("class");
		if (check(x, y, clsName)) {
			setTimeout(function () {
				alert("游戏结束，" + username[(index - 1) % 2] + "获胜");
				$("td").off("click"); // 移除事件
			}, 100);
		}

	});
}

// 悔棋
function back(){
	$("#btn").click(function () {
		var obj = path.pop();
		if (!obj) {
			alert("别按了！")
			return;
		}
		$(`td[x='${obj.x}'][y='${obj.y}'] div`).remove();
		index--;
		var li = $("<li>");
		li.html(username[(index) % 2] + `悔棋在：(${obj.x},${obj.y})位置`);
		li.css("color", "red");
		$("#path").append(li);
	})
}

// 判断游戏是否结束
function check(x, y, clsName) {
	return a(x, y, clsName) >= 5 || b(x, y, clsName) >= 5 || c(x, y, clsName) >= 5 || d(x, y, clsName) >= 5
}

// 水平方向
function a(x, y, clsName) {
	var count = 1; // 相同棋子的数量

	// 获取左边棋子的数量
	var x1 = x;
	var y1 = y - 1;
	while ($(`td[x='${x1}'][y='${y1}']`).find(`div[class='${clsName}']`).length) {
		count++;
		y1--;
	}

	// 获取右边棋子的数量
	var x2 = x;
	var y2 = y + 1;
	while ($(`td[x='${x2}'][y='${y2}']`).find(`div[class='${clsName}']`).length) {
		count++;
		y2++;
	}

	return count;
}

// 垂直方向
function b(x, y, clsName) {
	var count = 1;

	// 获取上边棋子的数量
	var x1 = x - 1;
	var y1 = y;
	while ($(`td[x='${x1}'][y='${y1}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x1--;
	}

	// 获取下边棋子的数量
	var x2 = x + 1;
	var y2 = y;
	while ($(`td[x='${x2}'][y='${y2}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x2++;
	}

	return count;
}

// 正斜杠方向
function c(x, y, clsName) {
	var count = 1;

	// 获取左下边棋子的数量
	var x1 = x - 1;
	var y1 = y + 1;
	while ($(`td[x='${x1}'][y='${y1}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x1--;
		y1++;
	}

	// 获取右上边棋子的数量
	var x2 = x + 1;
	var y2 = y - 1;
	while ($(`td[x='${x2}'][y='${y2}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x2++;
		y2--;
	}
	console.log(clsName, count, "td[x=" + x2 + "][y=" + y2 + "]")
	return count;
}

// 反斜杠方向
function d(x, y, clsName) {
	var count = 1;

	// 获取左上边棋子的数量
	var x1 = x - 1;
	var y1 = y - 1;
	while ($(`td[x='${x1}'][y='${y1}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x1--;
		y1--;
	}

	// 获取在下边棋子的数量
	var x2 = x + 1;
	var y2 = y + 1;
	while ($(`td[x='${x2}'][y='${y2}']`).find(`div[class='${clsName}']`).length) {
		count++;
		x2++;
		y2++;
	}

	return count;
}

